<template>
	<div class="box" style="width: 100%;box-sizing: border-box; padding: 40px; background-color: white;">
		<div class="container" style="box-sizing: border-box; padding: 0;">
			<!-- 所有商品列表 -->
			<template style="border: 1px red solid;">
				<el-table :data="showData" style="width: 96%" border>
					<el-table-column type="index" width="50" align="center">
					</el-table-column>
					<el-table-column label="商品id" width="180" align="center">
						<template slot-scope="scope">
							<span>{{ scope.row.good_id }}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品名字" width="360" align="center">
						<template slot-scope="scope">
							<span style="display:-webkit-box;
							overflow:hidden;
							-webkit-box-orient:vertical;
							-webkit-line-clamp:2;">
								{{ scope.row.good_name}}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品图片" width="180" align="center">
						<template slot-scope="scope">
							<img :src="scope.row.img" style="width: 60px; height: 60px;" />
						</template>
					</el-table-column>
					<el-table-column label="商品价格" width="180" align="center">
						<template slot-scope="scope">
							<span style="color: red;">{{ scope.row.price}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center">
						<template slot="header" slot-scope="scope">
								<el-input
								v-model="search"
								size="mini"
								placeholder="输入关键字搜索"/>
								<div style="display: none;">{{scope.$index}}</div>
						</template>
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页器 -->
			<div class="block" style="margin-top: 20px;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
				:page-sizes="[5, 6, 7, 8]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>

			<!-- 新增商品按钮 -->
			<button class="addShow" @click="openShow">新增商品</button>

			<!-- 新增商品页面 -->
			<div class="addgoodsinfo" v-show="isAddShow">
				<div class="addgoodsinfo-box">
					<p style="text-align: center; padding-bottom: 20px; font-weight: bold;font-size: 25px;">商品添加</p>
					<el-form ref="form" :model="form" label-width="100px">
						<el-form-item label="商品名称">
							<el-input v-model="good_name"></el-input>
						</el-form-item>
						<el-form-item label="商品价格">
							<el-input v-model="price" type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品分类">
							<el-select v-model="type_id" placeholder="请选择商品分类">
								<el-option :label="item.type_name" :value="item.good_type_id" v-for="(item,index) in classifyData" v-bind:key="index"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品封面图">
							<el-upload class="upload-demo" ref="upload" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview1"
							:on-remove="handleRemove1" :file-list="fileList1" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="轮播图">
							<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview2"
							:on-remove="handleRemove2" :file-list="fileList2" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="商品详情图">
							<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview3"
							:on-remove="handleRemove3" :file-list="fileList3" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="SKU">
							<el-button size="small" type="primary" @click="isSKU = true">添加SKU</el-button>
							<el-form v-show="isSKU" ref="form" :model="form" label-width="80px">
								<el-form-item label="SKU信息">
									<el-input v-model="SKU.goods_info"></el-input>
								</el-form-item>
								<el-form-item label="SKU价格">
									<el-input v-model="SKU.goods_price" type="number"></el-input>
								</el-form-item>
								<el-form-item label="SKU库存">
									<el-input v-model="SKU.goods_inventory" type="number"></el-input>
								</el-form-item>
								<el-form-item label="SKU图片">
									<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic/" :on-preview="handlePreview4"
									:on-remove="handleRemove4" :file-list="fileList4" list-type="picture" :auto-upload="true">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
								</el-form-item>
								<el-button size="small" type="primary" @click="addSKU">添加SKU</el-button>
								<el-button @click="isSKU = false">取消</el-button>
							</el-form>
							<div v-for="(item,index) in editionTemp" :key="index" class="SKUList">
								{{item.goods_info}}
								<el-button size="small" type="primary" style="float: right;" @click="delSKU(index)">删除</el-button>
							</div>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" 
							@click="onSubmit" style="margin-right: 130px; margin-left: -30px;">立即创建</el-button>
							<el-button @click="closeShow">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
			
			<!-- 修改页面 -->
			<div class="addgoodsinfo" v-show="isChangeShow">
				<div class="addgoodsinfo-box">
					<p style="text-align: center; padding-bottom: 20px; font-weight: bold;font-size: 25px;">商品修改</p>
					<el-form ref="form" :model="form" label-width="100px">
						<el-form-item label="商品名称">
							<el-input v-model="good_name"></el-input>
						</el-form-item>
						<el-form-item label="商品价格">
							<el-input v-model="price" type="number"></el-input>
						</el-form-item>
						<el-form-item label="商品分类">
							<el-select v-model="type_id" placeholder="请选择商品分类">
								<el-option :label="item.type_name" :value="item.good_type_id" v-for="(item,index) in classifyData" v-bind:key="index"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品封面图">
							<el-upload class="upload-demo" ref="upload" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview1"
							:on-remove="handleRemove1" :file-list="fileList1" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="轮播图">
							<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview2"
							:on-remove="handleRemove2" :file-list="fileList2" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="商品详情图">
							<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic" :on-preview="handlePreview3"
							:on-remove="handleRemove3" :file-list="fileList3" list-type="picture">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
						<el-form-item label="SKU">
							<el-button size="small" type="primary" @click="isSKU = true">添加SKU</el-button>
							<el-form v-show="isSKU" ref="form" :model="form" label-width="80px">
								<el-form-item label="SKU信息">
									<el-input v-model="SKU.goods_info"></el-input>
								</el-form-item>
								<el-form-item label="SKU价格">
									<el-input v-model="SKU.goods_price" type="number"></el-input>
								</el-form-item>
								<el-form-item label="SKU库存">
									<el-input v-model="SKU.goods_inventory" type="number"></el-input>
								</el-form-item>
								<el-form-item label="SKU图片">
									<el-upload class="upload-demo" action="http://api_devs.wanxikeji.cn/api/savePic/" :on-preview="handlePreview4"
									:on-remove="handleRemove4" :file-list="fileList4" list-type="picture" :auto-upload="true">
										<el-button size="small" type="primary">点击上传</el-button>
									</el-upload>
								</el-form-item>
								<el-button size="small" type="primary" @click="addSKU">添加SKU</el-button>
								<el-button @click="isSKU = false">取消</el-button>
							</el-form>
							<div v-for="(item,index) in editionTemp" :key="index" class="SKUList">
								{{item.goods_info}}
								<el-button size="small" type="primary" style="float: right;" @click="delSKU(index)">删除</el-button>
							</div>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onChange" style="margin-right: 130px; margin-left: -30px;">立即修改</el-button>
							<el-button @click="isChangeShow = false">取消</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				token: "", //管理员登录的token 已获取
				good_name: "", //商品的名字
				type_id: "", //不知名分类id 必须要！
				type_parent_id: 0, //分类的id 不管
				price: "", //封面价格
				img: "", //封面图
				imgs: "", //商品详情的轮播图
				imgsTemp: [], //商品详情的轮播图
				info: "", //商品详情
				infoTemp: [], //商品详情
				is_new: 0, //是否热卖 热卖1 不热卖0
				colour: "", // spu 跟sku一样
				edition: "", // sku 
				editionTemp:[], //sku
				good_id: 0, //商品id 有则修改商品 无则添加商品
				tableData: [], //后台所有的数据源
				showData: [], //分页展示出来的数据
				classifyData: [], //分类所有的数据
				searchData: [], //搜索所有的数据
				currentPage: 1, //当前页
				pageSize: 5, //每页条目数
				isAddShow: false, //添加页面
				isChangeShow:false, //修改页面
				fileList1:[], //封面图片
				fileList2:[], //轮播图片
				fileList3:[], //商品详情图片
				fileList4:[], //商品SKU图片
				isSKU:false, //SKU页面展示
				SKU:{
					"goods_info":"",
					"goods_price":"",
					"goods_inventory":"",
					"goods_img":""
				}, //SKU对象
				form: {
				},
				search:"", //搜索结果
				total:null, //数据总长度
			}

		},
		methods: {
			handleEdit(index, row) { //商品数据修改
				console.log(index, row);
				this.isChangeShow = true;
				this.good_name = row.good_name;
				this.price = row.price;
				this.good_id = row.good_id;
			},
			handleDelete(index, row) { //商品数据删除
				console.log(index,row.good_id);
				this.axios({
					url:"api/admin/deleteGood",
					method:"post",
					data:{
						token:this.token,
						good_id:row.good_id
					}
				}).then( res => {
					console.log(res);
				})
				if(this.search!=""){
					this.freshPage(this.searchData,row.good_id)
				}else{
					this.freshPage(this.tableData,row.good_id);
				}
			},
			handleSizeChange(val) {
				this.pageSize = val
				this.currentPage = 1;
				if(this.search != ""){
					this.showData = this.searchData.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage);
				}else{
					this.showData = this.tableData.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage);
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.showData = [];
				if(this.search != ""){
					this.showData = this.searchData.slice(this.pageSize * (val - 1), this.pageSize * val);
				}else{
					this.showData = this.tableData.slice(this.pageSize * (val - 1), this.pageSize * val);
				}
			},
			firstPush() { //第一次将数据展示在页面上
				this.showData = this.tableData.slice(0, 5)
			},
			onSubmit() { //表单提交按钮
				this.imgs = this.imgsTemp;
				this.info = this.infoTemp;
				this.edition = this.editionTemp;
				let state = 0;
				console.log(this.good_name);
				if(this.good_name == null){
					state = 1
				}else if(this.type_id == ""){
					state = 2
				}else if(this.price == null){
					state = 3
				}else if(this.img == ""){
					state = 4
				}else if(this.imgs == ""){
					state = 5
				}else if(this.info == ""){
					state = 6
				}else if(this.edition == ""){
					state = 7
				}else{
					state = 8
					this.imgsTemp = [];
					this.infoTemp = [];
					this.editionTemp = [];
					this.fileList1 = [];
					this.fileList2 = [];
					this.fileList3 = [];
				}
				
				switch(state){
					case 1:
						alert("请添加商品名");
						break;
					case 2:
						alert("请添加商品分类");
						break;
					case 3:
						alert("请添加商品价格");
						break;
					case 4:
						alert("请添加商品封面图片");
						break;
					case 5:
						alert("请添加商品轮播图片");
						break;
					case 6:
						alert("请添加商品详情图片");
						break;
					case 7:
						alert("请添加商品的sku");
						break;
					case 8:
						this.onSubmitTrue();
						break;
				}
				
				// console.log(this.good_name);
				// console.log(this.price);
				// console.log(this.good_id);
				// console.log(this.img);
				// console.log(this.imgs);
				// console.log(this.info);
				// console.log(this.edition);

			},
			onSubmitTrue(){ //可以创建商品
				this.axios({
					url:"api/admin/addModifyGood",
					method:"post",
					data:{
						token:this.token,
						good_name:this.good_name,
						type_id:this.type_id,
						type_parent_id:this.type_id,
						price:this.price,
						img:this.img,
						imgs:this.imgs,
						info:this.info,
						is_new:0,
						colour:this.edition,
						edition:this.edition
					}
				}).then( res => {
					console.log(res);
					this.axios({
						url:"api/admin/goodList",
						method:"post",
						data:{
							token:this.token,
							page:1,
							size:1000,
						}
					}).then( res => {
						this.tableData = res.data.data.data;
						this.freshPage(this.tableData);
					})
				})
				
				this.isAddShow = false;
			},
			onChange(){ //商品数据修改				
				this.imgs = this.imgsTemp;
				this.info = this.infoTemp;
				this.edition = this.editionTemp;
				let state = 0;
				if(this.good_name == null){
					state = 1
				}else if(this.type_id == ""){
					state = 2
				}else if(this.price == null){
					state = 3
				}else if(this.img == ""){
					state = 4
				}else if(this.imgs == ""){
					state = 5
				}else if(this.info == ""){
					state = 6
				}else if(this.edition == ""){
					state = 7
				}else{
					state = 8
					this.imgsTemp = [];
					this.infoTemp = [];
					this.editionTemp = [];
					this.fileList1 = [];
					this.fileList2 = [];
					this.fileList3 = [];
				}
				
				switch(state){
					case 1:
						alert("请添加商品名");
						break;
					case 2:
						alert("请添加商品分类");
						break;
					case 3:
						alert("请添加商品价格");
						break;
					case 4:
						alert("请添加商品封面图片");
						break;
					case 5:
						alert("请添加商品轮播图片");
						break;
					case 6:
						alert("请添加商品详情图片");
						break;
					case 7:
						alert("请添加商品的sku");
						break;
					case 8:
						this.onChangeTrue();
						break;
				}
			},
			onChangeTrue(){ //商品数据修改可以点击
				this.axios({
					url:"api/admin/addModifyGood",
					method:"post",
					data:{
						token:this.token,
						good_name:this.good_name,
						type_id:this.type_id,
						type_parent_id:this.type_id,
						price:this.price,
						img:this.img,
						imgs:this.imgs,
						info:this.info,
						is_new:0,
						colour:this.edition,
						edition:this.edition,
						good_id:this.good_id
					}
				}).then( res => {
					console.log(res);
					this.axios({
						url:"api/admin/goodList",
						method:"post",
						data:{
							token:this.token,
							page:1,
							size:1000,
						}
					}).then( res => {
						this.tableData = res.data.data.data;
						this.freshPage(this.tableData);
					})
				})
				
				this.isChangeShow = false;
			},
			openShow() { //打开添加页面
				this.isAddShow = true;
				this.good_name = null;
				this.price = null;
				this.good_id = null;
			},
			closeShow() { //关闭添加页面 
				this.isAddShow = false;
			},
			handleRemove1(file) { 
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					if(this.img == address){
						this.img = "";
					}
				})
			},
			handlePreview1(file) {
				// this.img = file.url;
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					this.img = "http://api_devs.wanxikeji.cn/" + res.data.data
				})
				this.$message('图片上传成功');
			},
			handleRemove2(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					for(let i=0; i<this.imgsTemp.length; i++){
						if(this.imgsTemp[i] == address){
							this.imgsTemp.splice(i,1);
						}
					}
				})
				
			},
			handlePreview2(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					this.imgsTemp.push(address);
				})
				this.$message('图片上传成功');
			},
			handleRemove3(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					for(let i=0; i<this.infoTemp.length; i++){
						if(this.infoTemp[i] == address){
							this.infoTemp.splice(i,1);
						}
					}
				})
			},
			handlePreview3(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					this.infoTemp.push(address);
				})
				this.$message('图片上传成功');
			},
			handleRemove4(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					let address = "http://api_devs.wanxikeji.cn/" + res.data.data
					if(this.SKU.goods_img == address){
						this.SKU.goods_img = "";
					}
				})
				
			},
			handlePreview4(file) {
				let pic = new FormData();
				pic.append("img", file.raw);
				this.axios.post("http://api_devs.wanxikeji.cn/api/savePic",pic).then( res => {
					this.SKU.goods_img = "http://api_devs.wanxikeji.cn/" + res.data.data
				})
				this.$message('图片上传成功');
			},
			addSKU(){ //添加SKU
				let state = 0
				if(this.SKU.goods_info == ""){
					state = 1
				}else if(this.SKU.goods_price == ""){
					state = 2
				}else if(this.SKU.goods_inventory == ""){
					state = 3
				}else if(this.SKU.goods_img == ""){
					state = 4
				}else{
					state = 5
				}
				
				switch(state){
					case 1:
						alert("请添加SKU的名称");
						break;
					case 2:
						alert("请添加SKU的价格");
						break;
					case 3:
						alert("请添加SKU的库存");
						break;
					case 4:
						alert("请添加SKU的图片");
						break;
					case 5:
						this.editionTemp.push(JSON.parse(JSON.stringify(this.SKU)));
						this.SKU.goods_info = "";
						this.SKU.goods_price = "";
						this.SKU.goods_inventory = "";
						this.SKU.goods_img = "";
						this.fileList4 = [];
						this.isSKU = false;
						this.$forceUpdate();
						break;
				}
				
			},
			delSKU(index){ //删除SKU
				this.editionTemp.splice(index,1);
			},
			freshPage(data,goodID){ //页面刷新
				for(let i=0; i<data.length; i++){
					if(data[i].good_id == goodID){
						console.log(data[i].good_id);
						console.log(goodID);
						data.splice(i,1);
					}
				}
				if(this.search!=""){
					this.getTotalPage(this.searchData);
				}else{
					this.getTotalPage(this.tableData);
				}
				if(this.showData.length == 1 && this.currentPage > 1){
					this.currentPage--
				}
				// this.showData = [];
				this.showData = data.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
				this.$forceUpdate();
			},
			getTotalPage(data){
				this.total = data.length;
			}
		},
		mounted() {
			// 获取商品列表
			this.axios({
				url: "api/admin/goodList",
				method: "post",
				data: {
					token: this.$store.state.token,
					page: 1,
					size: 100
				}
			}).then(res => {
				// console.log(res);
				this.tableData = res.data.data.data;
				this.getTotalPage(this.tableData);
				this.firstPush();
			})

			// 调取分类接口 拿到所有的分类 并上传到classifyData中
			this.axios({
				url: "api/admin/goodsTypeList",
				method: "post",
				data: {
					token: this.$store.state.token
				}
			}).then(res => {
				// console.log(res);
				this.classifyData = res.data.data;
			})
		},
		created() {
			this.token = this.$store.state.token;
		},
		watch:{
			search(a){
				if(a!=""){
					this.searchData= [];
					for(let i=0; i<this.tableData.length; i++){
						if(this.tableData[i].good_name.includes(this.search)){
							this.searchData.push(this.tableData[i])
						}
					}
					// this.searchData = this.tableData.filter(data => !a || data.good_name.toLowerCase().includes(a.toLowerCase()));
					this.freshPage(this.searchData);
				}else{
					this.currentPage = 1;
					this.axios({
						url:"api/admin/goodList",
						method:"post",
						data:{
							token:this.token,
							page:1,
							size:1000,
						}
					}).then( res => {
						this.tableData = res.data.data.data;
						this.freshPage(this.tableData);
					})
				}
			},

		}
	}
</script>

<style scoped>
	.addgoodsinfo {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(155, 155, 155, 0.6);
	}
	.addgoodsinfo-box {
		width: 500px;
		height: 700px;
		box-sizing: border-box;
		overflow: scroll;
		margin: 50px auto;
		opacity: 1;
		background-color: white;
		padding: 30px;
	}
	.addShow {
		float: right;
		margin-top: -30px;
		background-color: limegreen;
		padding: 10px 20px;
		border: none;
		border-radius: 8px;
		outline: none;
		cursor: pointer;
		color: white;
		font-weight: bold;
		margin-right: 60px;
	}
	.el-table::before{
		height: 0;
	}
	.el-table--border::after{
		right: -1px;
	}
	.SKUList{
		display: block;
	}
</style>
